<template>
  <div class="box">
    <var-app-bar title="详情" title-position="center">
      <template #left>
        <var-button
          @click="() => $router.go(-1)"
          color="transparent"
          text-color="#fff"
          round
          text
        >
          <var-icon name="chevron-left" :size="24" />
        </var-button>
      </template>
    </var-app-bar>
    <div class="body">
      <template v-for="item in details">
        <div class="text" v-if="item.type == 'text'">
          {{ item.content }}
        </div>
        <var-image
          v-if="item.type == 'img'"
          ripple
          lazy
          :src="item.imageUrl"
          :loading="loading"
          :error="loading"
          @click="preview(item.imageUrl)"
        />
        <VideoBase
          v-if="item.type == 'video'"
          :id="'aaaaa'"
          :autoplay="true"
          :videoUrl="item.videoUrl[0]"
        ></VideoBase>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getNewsDetail } from '@/api/news'
import { useRouter, useRoute } from 'vue-router'
import VideoBase from '../video/video.vue'
import { ImagePreview } from '@varlet/ui'
import loading from '@/assets/images/loading3.gif'
const $router = useRouter()
const $route = useRoute()
const details: any = ref([])
const getDetail = async () => {
  const obj = {
    app_id: 'yjroqmhvmjywnnqk',
    app_secret: 'Mck5hX919x1Wx6dJExAaF13u5zc8SYmR',
    newsId: $route.query.id,
  }
  const res = await getNewsDetail(obj)
  details.value = res.data.items
}

const preview = (src: string) => {
  ImagePreview({
    images: [src],
    closeable: true,
  })
}
onMounted(() => {
  getDetail()
})
</script>

<style scoped lang="scss">
.box {
  height: 100%;
  display: flex;
  flex-direction: column;

  .body {
    flex: 1;
    overflow-y: auto;
    padding: 5px;

    .text {
      text-indent: 2em;
      padding: 5px;
    }

    img {
      width: 100%;
    }
  }
}
</style>
